<template>
  <div class="app-container">
    <!--查询条件表单-->
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="年级" prop="gradeId">
        <el-select v-model="queryParams.gradeId" placeholder="年级" clearable>
          <el-option v-for="item in gradeOptions" :key="item.gradeId" :label="item.gradeName" :value="item.gradeId" />
        </el-select>
      </el-form-item>
      <el-form-item label="考试" prop="examId">
        <el-select v-model="queryParams.examId"  clearable placeholder="请选择">
          <el-option
              v-for="item in examOptions"
              :key="item.examId"
              :label="item.examCombinationName"
              :value="item.examId"
              :disabled="item.status == 0"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button type="success" icon="Printer" @click="handlePrinter">打印</el-button>
        <el-button type="warning" icon="Download" @click="handleDownload">导出</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="12">
        <div ref="clazzPhysicalScoreBarStats" style="height: 420px" />
      </el-col>
      <el-col :span="12">
        <div ref="clazzPhysicalScoreBarStats2" style="height: 420px" />
      </el-col>
    </el-row>
    <el-divider/>
    <el-row>
      <el-col :span="12">
        <div ref="clazzPhysicalScoreBarStats3" style="height: 420px" />
      </el-col>
      <el-col :span="12">
        <div ref="clazzPhysicalScoreBarStats4" style="height: 420px" />
      </el-col>
    </el-row>
<!--    <el-divider/>-->
<!--    <el-row>-->
<!--      <el-col :span="24">-->
<!--        <tree-item :tree-data="treeData" :tree-first="true"></tree-item>-->
<!--      </el-col>-->
<!--    </el-row>-->
    <el-row>
      <el-col :span="24">
        <el-tabs  type="border-card" v-if="clazzScoreMapList.length > 0" :model-value="'clazzId_' + clazzScoreMapList[0].clazzId">
          <el-tab-pane :label="item.clazzName" :name="'clazzId_' + item.clazzId" v-for="item in clazzScoreMapList">
            <div class="el-table el-table--enable-row-hover el-table--medium el-table--border">
              <table class="el-table__body" cellspacing="0" style="width: 100%" v-if="item.tableData.length > 0">
                <thead>
                <tr class="el-table__row">
                  <template v-for="(subItem, index) in item.tableData[0]">
                    <td style="text-align: center" class="el-table__cell" v-if="index == 0" rowspan="2"><b>{{subItem}}</b></td>
                    <td style="text-align: center" class="el-table__cell" v-else colspan="2"><b>{{subItem}}</b></td>
                  </template>
                </tr>
                <tr class="el-table__row">
                  <template v-for="(subItem, index) in item.tableData[1]">
                    <td style="text-align: center" class="el-table__cell"><b>{{subItem}}</b></td>
                  </template>
                </tr>
                </thead>
                <tbody>
                <template v-for="(subItem, index) in item.tableData">
                  <tr class="el-table__row" v-if="index > 1">
                    <template v-for="subSubItem in subItem">
                      <td style="text-align: center" class="el-table__cell" v-html="subSubItem"></td>
                    </template>
                  </tr>
                </template>
                </tbody>
              </table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

  </div>
</template>

<script setup name="GradeScoreAnalysis">
import {getCurrentInstance, reactive, ref, toRefs, watch} from "vue";
import * as publicApi from "@/api/school/publicApi";
import * as echarts from "echarts";
import 'echarts-wordcloud';
import * as gradeScoreApi from "@/api/analysis/gradeScoreApi";

const { proxy } = getCurrentInstance();


// import TreeItem from  '@/components/TreeItem'
//
// const treeData = ref(
//     [{
//       name: '1',
//       child: [
//         { name: '2',
//           child: [{ name: '1' }, { name: '2' }]
//         },
//         { name: '1',
//           child: [{ name: '1' }, { name: '2' }]
//         }
//       ]
//     }]
// );
const data = reactive({
  queryParams: {
    gradeId: undefined,
    // clazzId: undefined,
    examId: undefined
  }
})

const { queryParams } = toRefs(data)

/** 查询表单相关变量 */
const showSearch = ref(true);
const loading = ref(true);
const gradeOptions = ref([]);
const examOptions = ref([]);
const clazzScoreMapList = ref([])

/** 年级列表 */
publicApi.allGradeList().then((response) => {
  gradeOptions.value = response
})
/** 考试列表 */
publicApi.allExamList().then((response) => {
  examOptions.value = response
})

function getList() {
  loading.value = true;
  gradeScoreApi
      .listEchartsData(queryParams.value)
      .then((response) => {
          barChartBuild(response)
          barChartBuild2(response)
          barChartBuild3(response)
          barChartBuild4(response)
          clazzScoreMapList.value = response.clazzScoreMapList
      })
      .finally(() => {
        loading.value = false;
      });
}

const clazzPhysicalScoreBarStats = ref(null);
const clazzPhysicalScoreBarStatsInstance =ref(null);

const clazzPhysicalScoreBarStats2 = ref(null);
const clazzPhysicalScoreBarStatsInstance2 =ref(null);

const clazzPhysicalScoreBarStats3 = ref(null);
const clazzPhysicalScoreBarStatsInstance3 =ref(null);

const clazzPhysicalScoreBarStats4 = ref(null);
const clazzPhysicalScoreBarStatsInstance4 =ref(null);

/** 搜索 */
function handleQuery() {
  getList()
}


/** 打印 */
function handlePrinter() {
  proxy.download("/analysis/grade_score/pdf_list", queryParams.value, "年级考试成绩.pdf")
}

/** 导出 */

function handleDownload() {
  proxy.download("/analysis/grade_score/excel_list", queryParams.value, "年级考试成绩.xlsx")
}

/** 重置搜索条件 */
function resetQuery() {

}

//构造柱状图
function barChartBuild(response) {
  const clazzPhysicalScoreStatsInstance = echarts.init(clazzPhysicalScoreBarStats.value, 'macarons');
  let option = {
    legend: {},
    tooltip: {},
    dataset: {
      source: response.objListList
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0,
        formatter: function (value) {
          return value.split('').join('\n')
        }
      }
    },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: response.seriesBarList
  }
  clazzPhysicalScoreStatsInstance.setOption(option);
  clazzPhysicalScoreBarStatsInstance.value = clazzPhysicalScoreStatsInstance
}


//构造柱状图
function barChartBuild2(response) {
  const clazzPhysicalScoreStatsInstance = echarts.init(clazzPhysicalScoreBarStats2.value, 'macarons');
  let option = {
    legend: {},
    tooltip: {},
    dataset: {
      source: response.objListList2
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0,
        formatter: function (value) {
          return value.split('').join('\n')
        }
      }
    },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: response.seriesBarList2
  }
  clazzPhysicalScoreStatsInstance.setOption(option);
  clazzPhysicalScoreBarStatsInstance2.value = clazzPhysicalScoreStatsInstance
}

function barChartBuild3(response) {
  const clazzPhysicalScoreStatsInstance = echarts.init(clazzPhysicalScoreBarStats3.value, 'macarons');
  let option = {
    legend: {},
    tooltip: {},
    dataset: {
      source: response.objListList3
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0,
        formatter: function (value) {
          return value.split('').join('\n')
        }
      }
    },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: response.seriesBarList3
  }
  clazzPhysicalScoreStatsInstance.setOption(option);
  clazzPhysicalScoreBarStatsInstance3.value = clazzPhysicalScoreStatsInstance
}

function barChartBuild4(response) {
  const clazzPhysicalScoreStatsInstance = echarts.init(clazzPhysicalScoreBarStats4.value, 'macarons');
  let option = {
    legend: {},
    tooltip: {},
    dataset: {
      source: response.objListList4
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0,
        formatter: function (value) {
          return value.split('').join('\n')
        }
      }
    },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: response.seriesBarList4
  }
  clazzPhysicalScoreStatsInstance.setOption(option);
  clazzPhysicalScoreBarStatsInstance4.value = clazzPhysicalScoreStatsInstance
}


</script>

<style scoped>

</style>
